<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超市满减红包详情 - 社交红包</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #e63946;
            --primary-light: #f1faee;
            --secondary: #1d3557;
            --accent: #f1faee;
            --light: #f8f9fa;
            --dark: #1d3557;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f9f9f9;
            color: var(--dark);
            line-height: 1.6;
            padding-top: 20px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .back-link {
            color: var(--gray);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 20px;
            transition: var(--transition);
        }
        
        .back-link:hover {
            color: var(--primary);
        }
        
        /* 红包详情主样式 */
        .redpacket-detail {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .redpacket-header {
            padding: 25px 30px;
            background: linear-gradient(135deg, var(--primary), #d62828);
            color: white;
            position: relative;
        }
        
        .redpacket-type {
            font-size: 0.9rem;
            font-weight: 500;
            opacity: 0.9;
            margin-bottom: 10px;
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            background-color: rgba(255,255,255,0.2);
        }
        
        .redpacket-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .redpacket-amount {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .redpacket-amount small {
            font-size: 1rem;
            font-weight: normal;
            opacity: 0.9;
        }
        
        .redpacket-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 红包内容区 */
        .redpacket-content {
            padding: 30px;
        }
        
        .redpacket-gallery {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .main-image {
            width: 100%;
            height: 300px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .thumbnail {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            object-fit: cover;
            cursor: pointer;
            opacity: 0.8;
            transition: var(--transition);
            flex-shrink: 0;
        }
        
        .thumbnail:hover, .thumbnail.active {
            opacity: 1;
            border: 2px solid var(--primary);
        }
        
        .redpacket-description {
            margin-bottom: 30px;
            font-size: 1.05rem;
            line-height: 1.8;
        }
        
        .redpacket-terms {
            background-color: #fff5f5;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .terms-title {
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .terms-list {
            padding-left: 20px;
        }
        
        .terms-list li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 5px;
        }
        
        /* 红包作者信息 */
        .redpacket-author {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px 30px;
            border-top: 1px solid var(--light-gray);
            border-bottom: 1px solid var(--light-gray);
        }
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .author-role {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .author-stats {
            display: flex;
            gap: 15px;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        /* 操作按钮区 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #d62828;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .btn-outline {
            background-color: transparent;
            color: var(--gray);
            border: 1px solid var(--light-gray);
        }
        
        .btn-outline:hover {
            background-color: var(--light);
            color: var(--dark);
        }
        
        /* 数据统计 */
        .stats-container {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            flex: 1;
            min-width: 120px;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        /* 留言区 */
        .comments-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-form {
            margin-bottom: 30px;
        }
        
        .comment-textarea {
            width: 100%;
            border: 1px solid var(--light-gray);
            border-radius: 8px;
            padding: 15px;
            resize: none;
            min-height: 100px;
            margin-bottom: 15px;
            transition: var(--transition);
        }
        
        .comment-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .submit-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .submit-comment:hover {
            background-color: #d62828;
        }
        
        /* 留言列表 */
        .comments-list {
            margin-bottom: 30px;
        }
        
        .comment-item {
            padding: 20px 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--gray);
            margin-left: auto;
        }
        
        .comment-content {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--gray);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--primary);
        }
        
        /* 回复 */
        .replies {
            margin-left: 50px;
            margin-top: 15px;
        }
        
        .reply-item {
            padding: 15px 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .reply-form {
            margin-left: 50px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: none;
        }
        
        .reply-form.active {
            display: block;
        }
        
        .reply-textarea {
            width: 100%;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 10px;
            resize: none;
            min-height: 80px;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .reply-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .reply-btn {
            padding: 5px 15px;
            font-size: 0.9rem;
        }
        
        /* 倒计时 */
        .countdown-box {
            background-color: rgba(230, 57, 70, 0.1);
            border-radius: 8px;
            padding: 15px 20px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        /* 相关推荐 */
        .related-redpackets {
            margin-top: 40px;
        }
        
        .related-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
        }
        
        .related-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: var(--transition);
            text-decoration: none;
            color: var(--dark);
        }
        
        .related-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            color: var(--dark);
        }
        
        .related-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .related-info {
            padding: 15px;
        }
        
        .related-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-amount {
            color: var(--primary);
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .redpacket-header, .redpacket-content {
                padding: 20px 15px;
            }
            
            .redpacket-title {
                font-size: 1.5rem;
            }
            
            .redpacket-amount {
                font-size: 2rem;
            }
            
            .redpacket-author {
                flex-direction: column;
                align-items: flex-start;
                padding: 15px;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-btn {
                width: 100%;
                justify-content: center;
            }
            
            .comments-section {
                padding: 20px 15px;
            }
            
            .replies {
                margin-left: 20px;
            }
            
            .reply-form {
                margin-left: 20px;
            }
            
            .main-image {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 返回链接 -->
        <a href="#" class="back-link">
            <i class="fas fa-arrow-left"></i> 返回红包列表
        </a>
        
        <!-- 红包详情卡片 -->
        <div class="redpacket-detail">
            <div class="redpacket-header">
                <span class="redpacket-type">购物抵扣红包</span>
                <h1 class="redpacket-title">超市满减红包 - 最高立减50元</h1>
                <div class="redpacket-amount">
                    ¥5 - ¥50 <small>随机金额</small>
                </div>
                <div class="redpacket-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i> 有效期至 2023-12-31
                    </div>
                    <div class="meta-item">
                        <i class="far fa-map-marker-alt"></i> 全国通用
                    </div>
                    <div class="meta-item">
                        <i class="far fa-building"></i> 惠民超市全门店
                    </div>
                </div>
            </div>
            
            <!-- 红包内容区 -->
            <div class="redpacket-content">
                <!-- 图片展示 -->
                <div class="redpacket-gallery">
                    <img src="https://picsum.photos/id/292/1200/800" alt="超市满减红包宣传图" class="main-image" id="mainImage">
                    <img src="https://picsum.photos/id/431/200/200" alt="超市商品展示" class="thumbnail active" data-img="https://picsum.photos/id/431/1200/800">
                    <img src="https://picsum.photos/id/292/200/200" alt="超市满减活动" class="thumbnail" data-img="https://picsum.photos/id/292/1200/800">
                    <img src="https://picsum.photos/id/139/200/200" alt="超市内部环境" class="thumbnail" data-img="https://picsum.photos/id/139/1200/800">
                    <img src="https://picsum.photos/id/488/200/200" alt="超市促销活动" class="thumbnail" data-img="https://picsum.photos/id/488/1200/800">
                </div>
                
                <!-- 红包描述 -->
                <div class="redpacket-description">
                    <p>惠民超市新年大促，发放全场通用满减红包！活动期间，用户可领取随机金额红包，在全国所有惠民超市门店消费时使用，满足相应金额即可抵扣。</p>
                    <p>红包金额随机发放，最低5元，最高50元，每个用户限领3次，每次使用限用1个红包。可与店内其他促销活动叠加使用，让您享受更多优惠！</p>
                </div>
                
                <!-- 使用条款 -->
                <div class="redpacket-terms">
                    <h3 class="terms-title">
                        <i class="fas fa-info-circle"></i> 使用规则
                    </h3>
                    <ul class="terms-list">
                        <li>满100元可使用5-10元红包</li>
                        <li>满200元可使用15-30元红包</li>
                        <li>满300元可使用35-50元红包</li>
                        <li>有效期至2023年12月31日，逾期作废</li>
                        <li>仅限惠民超市线下门店使用，不支持线上商城</li>
                        <li>烟酒类商品不参与此活动</li>
                        <li>每个用户最多可领取3个红包，每次消费限用1个</li>
                    </ul>
                </div>
                
                <!-- 倒计时 -->
                <div class="countdown-box">
                    <i class="far fa-clock"></i>
                    <span>红包领取倒计时: <strong>2天8小时30分</strong></span>
                </div>
                
                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="action-btn btn-primary grab-btn">
                        <i class="fas fa-hand-holding-usd"></i> 立即领取红包
                    </button>
                    <button class="action-btn btn-outline share-btn">
                        <i class="fas fa-share-alt"></i> 分享
                    </button>
                    <button class="action-btn btn-outline save-btn">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
            
            <!-- 红包发布者信息 -->
            <div class="redpacket-author">
                <img src="https://picsum.photos/id/1080/200/200" alt="惠民超市官方账号头像" class="author-avatar">
                <div class="author-info">
                    <div class="author-name">惠民超市官方账号</div>
                    <div class="author-role">商超零售 · 官方认证</div>
                    <div class="author-stats">
                        <div><i class="far fa-user"></i> 125.3k 粉丝</div>
                        <div><i class="far fa-red-envelope"></i> 32 个红包</div>
                        <div><i class="far fa-star"></i> 4.8 评分</div>
                    </div>
                </div>
                <button class="action-btn btn-outline follow-btn">
                    <i class="far fa-user-plus"></i> 关注
                </button>
            </div>
        </div>
        
        <!-- 数据统计 -->
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-value">24.3k</div>
                <div class="stat-label">浏览量</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">568</div>
                <div class="stat-label">评论数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">3.2k</div>
                <div class="stat-label">点赞数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">12.8k</div>
                <div class="stat-label">已领取</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">24.5k</div>
                <div class="stat-label">剩余数量</div>
            </div>
        </div>
        
        <!-- 留言评论区 -->
        <div class="comments-section">
            <h2 class="section-title">
                <i class="far fa-comments"></i> 用户评论
            </h2>
            
            <!-- 评论表单 -->
            <div class="comment-form">
                <textarea class="comment-textarea" placeholder="分享你的使用体验或疑问..."></textarea>
                <div class="form-actions">
                    <button class="submit-comment">发表评论</button>
                </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comments-list">
                <!-- 评论1 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/1027/100/100" alt="用户头像" class="comment-avatar">
                        <span class="comment-author">李小明</span>
                        <span class="comment-time">2小时前</span>
                    </div>
                    <div class="comment-content">
                        这个红包很划算！昨天去超市买了200多块钱的东西，用了30元的红包，相当于打了八五折，非常给力！推荐大家领取使用。
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action like-action">
                            <i class="far fa-thumbs-up"></i> 有用 (42)
                        </a>
                        <a href="#" class="comment-action reply-action" data-id="1">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" id="replyForm1">
                        <textarea class="reply-textarea" placeholder="回复 @李小明..."></textarea>
                        <div class="reply-actions">
                            <button class="action-btn btn-outline reply-btn cancel-reply">取消</button>
                            <button class="action-btn btn-primary reply-btn submit-reply">回复</button>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/id/1066/100/100" alt="用户头像" class="comment-avatar">
                                <span class="comment-author">王小花</span>
                                <span class="comment-time">1小时前</span>
                            </div>
                            <div class="comment-content">
                                @李小明 请问你领到的是多少金额的红包呀？我领了两次都是5元的，是不是有什么技巧？
                            </div>
                            <div class="comment-actions">
                                <a href="#" class="comment-action like-action">
                                    <i class="far fa-thumbs-up"></i> 有用 (5)
                                </a>
                                <a href="#" class="comment-action reply-action" data-id="2">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/id/1027/100/100" alt="用户头像" class="comment-avatar">
                                <span class="comment-author">李小明</span>
                                <span class="comment-time">45分钟前</span>
                            </div>
                            <div class="comment-content">
                                @王小花 我是早上10点领的，第一次领了15元，第二次领了30元，好像整点领取金额会大一些，可以试试！
                            </div>
                            <div class="comment-actions">
                                <a href="#" class="comment-action like-action">
                                    <i class="far fa-thumbs-up"></i> 有用 (12)
                                </a>
                                <a href="#" class="comment-action reply-action" data-id="3">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论2 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="comment-avatar">
                        <span class="comment-author">张大山</span>
                        <span class="comment-time">昨天 15:30</span>
                    </div>
                    <div class="comment-content">
                        请问这个红包可以买生鲜吗？我看条款里没写，有知道的朋友麻烦告知一下，谢谢！
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action like-action">
                            <i class="far fa-thumbs-up"></i> 有用 (18)
                        </a>
                        <a href="#" class="comment-action reply-action" data-id="4">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" id="replyForm4">
                        <textarea class="reply-textarea" placeholder="回复 @张大山..."></textarea>
                        <div class="reply-actions">
                            <button class="action-btn btn-outline reply-btn cancel-reply">取消</button>
                            <button class="action-btn btn-primary reply-btn submit-reply">回复</button>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/id/1080/100/100" alt="惠民超市官方账号头像" class="comment-avatar">
                                <span class="comment-author">惠民超市官方账号 <span class="badge bg-primary">官方</span></span>
                                <span class="comment-time">昨天 16:45</span>
                            </div>
                            <div class="comment-content">
                                @张大山 您好，生鲜类商品可以使用此红包，只要满相应金额即可抵扣，感谢您的关注！
                            </div>
                            <div class="comment-actions">
                                <a href="#" class="comment-action like-action">
                                    <i class="far fa-thumbs-up"></i> 有用 (36)
                                </a>
                                <a href="#" class="comment-action reply-action" data-id="5">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论3 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/1025/100/100" alt="用户头像" class="comment-avatar">
                        <span class="comment-author">赵丽丽</span>
                        <span class="comment-time">3天前</span>
                    </div>
                    <div class="comment-content">
                        我在上海的惠民超市使用了这个红包，确实很方便，付款的时候出示一下核销码就可以了，工作人员也很热情地指导操作，点赞！
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action like-action liked">
                            <i class="fas fa-thumbs-up"></i> 有用 (89)
                        </a>
                        <a href="#" class="comment-action reply-action" data-id="6">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="text-center">
                <button class="action-btn btn-outline">
                    <i class="fas fa-spinner"></i> 加载更多评论
                </button>
            </div>
        </div>
        
        <!-- 相关红包推荐 -->
        <div class="related-redpackets">
            <h2 class="section-title">
                <i class="fas fa-red-envelope"></i> 相关红包推荐
            </h2>
            <div class="related-list">
                <a href="#" class="related-item">
                    <img src="https://picsum.photos/id/3/400/300" alt="外卖红包" class="related-image">
                    <div class="related-info">
                        <div class="related-title">外卖平台新用户专享红包 - 最高立减30元</div>
                        <div class="related-amount">¥15 - ¥30</div>
                    </div>
                </a>
                <a href="#" class="related-item">
                    <img src="https://picsum.photos/id/26/400/300" alt="数码产品红包" class="related-image">
                    <div class="related-info">
                        <div class="related-title">数码商城满减券 - 最高减200元</div>
                        <div class="related-amount">¥50 - ¥200</div>
                    </div>
                </a>
                <a href="#" class="related-item">
                    <img src="https://picsum.photos/id/96/400/300" alt="电影票红包" class="related-image">
                    <div class="related-info">
                        <div class="related-title">电影票抵扣券 - 2D/3D通用</div>
                        <div class="related-amount">¥5 - ¥20</div>
                    </div>
                </a>
                <a href="#" class="related-item">
                    <img src="https://picsum.photos/id/239/400/300" alt="旅游红包" class="related-image">
                    <div class="related-info">
                        <div class="related-title">暑期旅游大礼包 - 最高立减1000元</div>
                        <div class="related-amount">¥200 - ¥1000</div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 图片切换功能
            const thumbnails = document.querySelectorAll('.thumbnail');
            const mainImage = document.getElementById('mainImage');
            
            thumbnails.forEach(thumbnail => {
                thumbnail.addEventListener('click', function() {
                    // 更新主图
                    mainImage.src = this.getAttribute('data-img');
                    mainImage.alt = this.alt;
                    
                    // 更新缩略图激活状态
                    thumbnails.forEach(thumb => thumb.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 领取红包功能
            const grabButton = document.querySelector('.grab-btn');
            grabButton.addEventListener('click', function() {
                // 模拟加载状态
                const originalContent = this.innerHTML;
                this.disabled = true;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 领取中...';
                
                // 模拟领取过程
                setTimeout(() => {
                    const amounts = ['5', '8', '10', '15', '20', '30', '50'];
                    const randomAmount = amounts[Math.floor(Math.random() * amounts.length)];
                    
                    alert(`恭喜您成功领取 ¥${randomAmount} 红包！\n\n红包已存入您的账户，可在"我的红包"中查看。`);
                    
                    // 更新按钮状态
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-check"></i> 已领取';
                    this.classList.add('disabled');
                    this.style.backgroundColor = '#6c757d';
                    this.style.cursor = 'not-allowed';
                }, 1500);
            });
            
            // 收藏功能
            const saveButton = document.querySelector('.save-btn');
            saveButton.addEventListener('click', function() {
                this.classList.toggle('active');
                const icon = this.querySelector('i');
                
                if (this.classList.contains('active')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    icon.style.color = 'var(--primary)';
                    alert('已收藏该红包，可在"我的收藏"中查看');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    icon.style.color = '';
                }
            });
            
            // 关注功能
            const followButton = document.querySelector('.follow-btn');
            followButton.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const text = this.childNodes[2].textContent.trim();
                
                if (text === '关注') {
                    this.childNodes[2].textContent = ' 已关注';
                    icon.classList.remove('far', 'fa-user-plus');
                    icon.classList.add('fas', 'fa-check');
                    this.classList.remove('btn-outline');
                    this.classList.add('btn-primary');
                    alert('已关注 惠民超市官方账号');
                } else {
                    this.childNodes[2].textContent = ' 关注';
                    icon.classList.remove('fas', 'fa-check');
                    icon.classList.add('far', 'fa-user-plus');
                    this.classList.remove('btn-primary');
                    this.classList.add('btn-outline');
                }
            });
            
            // 分享功能
            const shareButton = document.querySelector('.share-btn');
            shareButton.addEventListener('click', function() {
                alert('分享功能：可分享到微信、QQ、微博等平台');
            });
            
            // 评论点赞功能
            const likeActions = document.querySelectorAll('.like-action');
            likeActions.forEach(action => {
                action.addEventListener('click', function(e) {
                    e.preventDefault();
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const countText = this.textContent.trim().match(/\d+/)[0];
                    let count = parseInt(countText);
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.innerHTML = `<i class="fas fa-thumbs-up"></i> 有用 (${count + 1})`;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.innerHTML = `<i class="far fa-thumbs-up"></i> 有用 (${count - 1})`;
                    }
                });
            });
            
            // 回复功能
            const replyActions = document.querySelectorAll('.reply-action');
            const cancelReplies = document.querySelectorAll('.cancel-reply');
            
            replyActions.forEach(action => {
                action.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    const replyForm = document.getElementById(`replyForm${id}`);
                    
                    // 关闭所有回复框
                    document.querySelectorAll('.reply-form').forEach(form => {
                        form.classList.remove('active');
                    });
                    
                    // 打开当前回复框
                    replyForm.classList.add('active');
                    replyForm.querySelector('textarea').focus();
                });
            });
            
            cancelReplies.forEach(button => {
                button.addEventListener('click', function() {
                    this.closest('.reply-form').classList.remove('active');
                });
            });
            
            // 提交回复
            const submitReplies = document.querySelectorAll('.submit-reply');
            submitReplies.forEach(button => {
                button.addEventListener('click', function() {
                    const replyForm = this.closest('.reply-form');
                    const textarea = replyForm.querySelector('textarea');
                    const content = textarea.value.trim();
                    
                    if (content) {
                        alert('回复成功！');
                        textarea.value = '';
                        replyForm.classList.remove('active');
                        // 实际应用中这里会发送请求保存回复并刷新列表
                    } else {
                        alert('请输入回复内容');
                    }
                });
            });
            
            // 提交评论
            const submitComment = document.querySelector('.submit-comment');
            submitComment.addEventListener('click', function() {
                const textarea = document.querySelector('.comment-textarea');
                const content = textarea.value.trim();
                
                if (content) {
                    alert('评论成功！');
                    textarea.value = '';
                    // 实际应用中这里会发送请求保存评论并刷新列表
                } else {
                    alert('请输入评论内容');
                }
            });
            
            // 加载更多评论
            const loadMoreBtn = document.querySelector('.text-center .action-btn');
            loadMoreBtn.addEventListener('click', function() {
                const originalContent = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                
                // 模拟加载更多
                setTimeout(() => {
                    this.innerHTML = originalContent;
                    alert('已加载全部评论');
                }, 1500);
            });
            
            // 倒计时功能
            function updateCountdown() {
                const countdownEl = document.querySelector('.countdown-box strong');
                if (!countdownEl) return;
                
                const timeText = countdownEl.textContent;
                let days = parseInt(timeText.match(/(\d+)天/)[1]);
                let hours = parseInt(timeText.match(/(\d+)小时/)[1]);
                let minutes = parseInt(timeText.match(/(\d+)分/)[1]);
                
                // 减少一分钟
                minutes--;
                
                if (minutes < 0) {
                    minutes = 59;
                    hours--;
                    
                    if (hours < 0) {
                        hours = 23;
                        days--;
                        
                        if (days < 0) {
                            days = 0;
                            hours = 0;
                            minutes = 0;
                            countdownEl.textContent = '已结束';
                            return;
                        }
                    }
                }
                
                countdownEl.textContent = `${days}天${hours}小时${minutes}分`;
            }
            
            // 每分钟更新一次倒计时
            setInterval(updateCountdown, 60000);
        });
    </script>
</body>
</html>
    
